<template>
  <div :style="addStyle" id="watermark-wrap" ref="watermarkWrapper">
  </div>
</template>

<script>
export default {
  name: 'watermark',
  props: {
    watermarkContent: {
      default: "",
      type: String
    },
    addStyle: {
      default: "",
      type: String
    },
    fontSize: {
      default: 14,
      type: Number
    },
    fontFamily: {
      default: "PingFang SC",
      type: String
    },
    rightAddSpace: {
      default: 20,
      type: Number
    },
    bottomAddSpace: {
      default: 20,
      type: Number
    },
    rotate: {
      default: -30,
      type: Number
    },
    fontWeight: {
      default: 500,
      type: Number
    },
    contentFillStyle: {
      default: "#999999",
      type: String
    },
    opacityNum: {
      default: 0.1,
      type: Number
    }
  },
  computed: {},
  data() {
    return {
      contentWidth: 0
    }
  },

  methods: {
    drawWatermark() {
      let pixeRatio = window.devicePixelRatio || 1;
      let wContent = this.watermarkContent ? this.watermarkContent : (localStorage.getItem("userName") + '_' + localStorage.getItem("userId"));
      var canv = document.createElement("canvas");
      canv.style.display = "none";
      var ctx = canv.getContext("2d");
      ctx.font = "".concat(this.fontWeight, " ").concat(this.fontSize, "px ").concat(this.fontFamily);
      ctx.textAlign = "left";
      ctx.textBaseline = "bottom";
      this.contentWidth = ctx.measureText(wContent).width;
      let tWidth = this.contentWidth < 150 ? 150 : this.contentWidth;
      //避免移动端看起来模糊，先把画布放大，当背景图的时候再缩小展示
      canv.width = (tWidth + this.rightAddSpace) * pixeRatio;
      canv.style.width = "".concat(tWidth + this.rightAddSpace, "px")
      let mHeight = Math.ceil(Math.tan(Math.abs(this.rotate) * Math.PI / 180) * tWidth);
      canv.height = ((mHeight < 100 ? 110 : mHeight + 10) + this.bottomAddSpace) * pixeRatio;
      canv.style.height = "".concat((mHeight < 100 ? 110 : mHeight + 10) + this.bottomAddSpace, "px");
      ctx.setTransform(pixeRatio, 0, 0, pixeRatio, 0, 0);
      ctx.font = "".concat(this.fontWeight, " ").concat(this.fontSize, "px ").concat(this.fontFamily);
      ctx.fillStyle = this.contentFillStyle;
      ctx.globalAlpha = this.opacityNum;
      ctx.rotate(Math.PI / 180 * this.rotate);
      let tLeft = Math.floor(Math.tan(Math.abs(this.rotate) * Math.PI / 180) * canv.height / pixeRatio);
      let tTop = Math.floor(Math.cos(Math.abs(this.rotate) * Math.PI / 180) * canv.height / pixeRatio);
      ctx.fillText(wContent, this.rotate > 0 ? (tLeft + 20) : (0 - tLeft + 20), tTop);
      var iUrl = canv.toDataURL("image/png");
      this.$refs.watermarkWrapper.style.backgroundImage = "url(".concat(iUrl, ")");
      this.$refs.watermarkWrapper.style.backgroundSize = "".concat(canv.style.width + ' ').concat(canv.style.height)
    }
  },
  mounted() {
    setTimeout(() => {
      this.drawWatermark();
    }, 100)
  },
  destroyed() {
  }
}
</script>

<style scoped>
#watermark-wrap {
  position: absolute;
  pointer-events: none;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
</style>